<template>
  <div class="main-wapper">
    <div class="fist-comment-box">
      <div class="my-reply">
        <a-avatar
          v-if="userInfo"
          class="header-img"
          :size="40"
          :src="userInfo.avatar"
        />
        <a-avatar
          v-else
          icon="user"
          :size="40"
        />

        <div class="reply-info">
          <a-textarea
            v-model="firstComment"
            placeholder="请文明评论!"
            :rows="4"
          />
        </div>
        <div class="reply-btn-box">
          <a-button
            class="reply-btn"
            type="primary"
            @click="clearComment"
          >
            清空
          </a-button>
          <a-button
            class="reply-btn"
            type="primary"
            @click="sendComment"
          >
            发表评论
          </a-button>
        </div>
      </div>
    </div>

    <div
      v-if="comments.length>0"
      class="comment-list-box"
    >
      <div class="title">
        热门评论
        <svg
          data-v-2e75beec=""
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class=""
        >
          <path
            data-v-2e75beec=""
            d="M12.8 5.2C13.9532 6.46 14.8 8.2 14.8 10C14.7039 12.8937 12.6843 15.1706 9.97973 15.8159C10.359 12.3442 7.77588 9.35406 7.77588 9.35406C7.77588 9.35406 7.99512 13.7064 6.79514 15.8104C4.03715 15.1428 2 12.7806 2 9.8C2 7.776 2.9336 5.9728 4.4 4.8C5.8608 3.7056 6.8 1.9656 6.8 0C9.684 0.4368 11.894 2.9264 11.894 5.932C11.894 6.5012 11.746 7.0652 11.6 7.6C12.1264 6.9024 12.6184 6.0876 12.8 5.2Z"
            fill="#F53F3F"
          />
        </svg>
      </div>
      <!-- <a-divider /> -->
      <div
        v-for="(item) in comments"
        :key="item.id"
        class="author-title reply-father"
      >
        <a-avatar
          class="header-img"
          :size="40"
          :src="item.fromAvatar"
        />
        <div class="author-info">
          <span>
            <span class="author-name">{{ item.fromName }}</span>
            <!-- <a-divider type="vertical" /> -->
            <time class="time"> {{ dateStr(item.createTime) }}</time>
          </span>

          <span class="author-time">{{ item.createTime }}</span>
        </div>
        <div class="icon-btn">
          <span @click="showReplyInput(item.id,item.fromName,item.id)">
            <i class="iconfont">
              <a-icon type="message" />
            </i>

          </span>
          <span>
            <i class="iconfont">
              <a-icon type="like" />
            </i>
          </span>
          <span>
            <i class="iconfont">
              <a-icon type="alert" />
            </i>
          </span>
          <span v-if="userInfo.roles=='role_admin' && userInfo!=null">
            <i
              class="iconfont"
              @click="deleteComment(item.id)"
            >
              <a-icon type="delete" />
            </i>
          </span>
        </div>
        <div class="talk-box">
          <p>
            <span class="reply">{{ item.content }}</span>
          </p>
        </div>
        <div
          v-show="showArr.indexOf(item.id)!=-1"
          class="my-reply my-comment-reply"
        >
          <a-avatar
            class="header-img"
            :size="40"
            :src="userInfo.avatar"
          />
          <div class="reply-info">
            <a-textarea
              v-model="replyComment"
              placeholder="请文明评论!"
              :rows="2"
            />
          </div>
          <div class="reply-btn-box">
            <a-button
              class="reply-btn"
              type="primary"
              @click="closeComment(item.id)"
            >
              取消
            </a-button>
            <a-button
              class="reply-btn"
              type="primary"
              @click="sendCommentReply(item.id,'')"
            >
              发表评论
            </a-button>
          </div>
        </div>
        <div class="reply-box">
          <div
            v-for="(reply) in item.children"
            :key="reply.id"
            class="author-title"
          >
            <a-avatar
              class="header-img"
              :size="40"
              :src="reply.fromAvatar"
            />
            <div class="author-info">
              <span>
                <span class="author-name">{{ reply.fromName }}</span>
                <!-- <a-divider type="vertical" /> -->
                <time class="time"> {{ dateStr(reply.createTime) }}</time>
              </span>
              <span class="author-time">{{ reply.createTime }}</span>
              <!-- <span class="author-name">{{reply.fromName}}</span>
                            <span class="author-time">{{reply.createTime}}</span>
                            <span class="author-time">{{dateStr(reply.createTime)}}</span> -->
            </div>
            <div class="icon-btn">
              <span @click="showReplyInput(reply.id,reply.fromName,reply.fromId)">
                <i class="iconfont">
                  <a-icon type="message" />
                </i>
              </span>
              <span>
                <i class="iconfont">
                  <a-icon type="like" />
                </i>
              </span>
              <span>
                <i class="iconfont">
                  <a-icon type="alert" />
                </i>
              </span>
              <span v-if="userInfo.roles=='role_admin' && userInfo!=null">
                <i
                  class="iconfont"
                  @click="deleteComment(reply.id)"
                >
                  <a-icon type="delete" />
                </i>
              </span>
            </div>
            <div class="talk-box">
              <p>
                <span>回复 <font
                  size="2"
                  style="padding:0px 4px"
                >{{ reply.toName }}</font>:</span>
                <span class="reply">{{ reply.content }}</span>
              </p>
              <span
                v-if="reply.parentContent"
                class="reply-parent-content"
              >
                <p> “{{ reply.parentContent }}“</p>
              </span>
            </div>
            <div
              v-show="showArr.indexOf(reply.id)!=-1"
              class="my-reply my-comment-reply"
            >
              <a-avatar
                class="header-img"
                :size="40"
                :src="userInfo.avatar"
              />
              <div class="reply-info">
                <a-textarea
                  v-model="replyComment"
                  placeholder="请文明评论!"
                  :rows="2"
                />
                <!-- <div tabindex="0"
                                     contenteditable="true"
                                     spellcheck="false"
                                     placeholder="输入评论..."
                                     @input="onDivInput($event)"
                                     class="reply-input reply-comment-input"></div> -->
              </div>
              <div class=" reply-btn-box">
                <a-button
                  class="reply-btn"
                  type="primary"
                  @click="closeComment(reply.id)"
                >
                  取消
                </a-button>
                <a-button
                  class="reply-btn"
                  type="primary"
                  @click="sendCommentReply(item.id,reply.content)"
                >
                  发表评论
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-else
      class="no-comment-box"
    >
      <span>暂无评论，快去抢占沙发吧</span>
    </div>
  </div>
</template>
<script>
import { addArticleComment, getArticleComment, checkToken, deleteComment } from '@/api/api'
export default {
  name: 'ArticleComment',
  props: {
    comment: Array,
    articleId: String
  },
  data () {
    return {
      firstComment: '',
      comments: this.comment,
      userInfo: {},
      btnShow: false,
      index: '0',
      replyComment: '',
      toName: '',
      toId: '',
      showArr: []
    }
  },
  mounted () {
    this.checkToken()
  },
  methods: {
    // 关闭弹框
    closeComment (record) {
      this.showArr = []
      this.clearComment()
    },
    deleteComment (record) {
      deleteComment(record).then((res) => {
        if (res.code === 200) {
          this.$message.success('操作成功!')
          this.getArticleComments()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    checkToken () {
      checkToken().then((res) => {
        if (res.code === 200) {
          this.userInfo = res.data
        } else {
          this.userInfo = {}
        }
      })
    },
    showReplyInput (i, name, id) {
      this.showArr = []
      this.showArr.push(i)
      this.toName = name
      this.toId = id
    },
    _inputShow (i) {
      if (this.showArr.length <= 0) {
        return false
      } else {
        return !this.showArr.includes(i)
      }
    },
    sendComment () {
      if (!this.firstComment) {
        this.$message.error('评论不能为空')
      } else {
        const comment = {}
        comment.fromId = this.userInfo.id
        comment.fromName = this.userInfo.userName // 用户名称
        comment.content = this.firstComment // 评论内容
        comment.fromAvatar = this.userInfo.avatar // 头像
        comment.articleId = this.articleId
        comment.likeNum = 0
        this.replyComment = ''
        addArticleComment(comment).then((result) => {
          if (result.code === 200) {
            this.$message.success('评论成功!')
            this.getArticleComments()
            this.clearComment()
          }
        })
      }
    },
    getArticleComments () {
      getArticleComment(this.articleId).then((res) => {
        if (res.code === 200) {
          this.comments = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    sendCommentReply (i, parentReply) {
      if (!this.replyComment) {
        this.$message.error('评论不能为空')
      } else {
        const comment = {}
        comment.articleId = this.articleId
        comment.commentId = i
        comment.fromId = this.userInfo.id
        comment.fromName = this.userInfo.userName
        comment.fromAvatar = this.userInfo.avatar
        comment.toName = this.toName
        comment.content = this.replyComment
        comment.parentContent = parentReply
        comment.like = 0
        // this.comments.forEach(item => {
        //     if (item.id === i) {
        //         item.children.push(comment);
        //     }
        // })
        this.replyComment = ''
        this.showArr = []
        addArticleComment(comment).then((result) => {
          if (result.code === 200) {
            this.$message.success('评论成功!')
            this.getArticleComments()
            this.clearComment()
          }
        })
      }
    },
    clearComment () {
      this.firstComment = ''
      this.replyComment = ''
    },
    onDivInput (e) {
      this.replyComment = e.target.innerHTML
    },
    dateStr (date) {
      // 获取js 时间戳
      let time = new Date().getTime()
      // date = date.substring(0, 19);
      // date = date.replace(/-/g, '/');
      const timestamp = new Date(date).getTime()
      // 去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - timestamp) / 1000)
      // 存储转换值
      let s
      if (time < 60 * 10) { // 十分钟内
        return '刚刚'
      } else if ((time < 60 * 60) && (time >= 60 * 10)) {
        // 超过十分钟少于1小时
        s = Math.floor(time / 60)
        return s + '分钟前'
      } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
        // 超过1小时少于24小时
        s = Math.floor(time / 60 / 60)
        return s + '小时前'
      } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
        // 超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24)
        return s + '天前'
      } else {
        // 超过30天
        const dates = new Date(date)
        return dates.getFullYear() + '/' + (dates.getMonth() + 1) + '/' + dates.getDate()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.fist-comment-box {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    background: #fff;
}
.comment-list-box {
    background: #fff;
    .title {
        -webkit-text-size-adjust: 100%;
        font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu,
            Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
            "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", Arial;
        text-rendering: optimizeLegibility;
        line-height: 20px;
        word-break: break-word;
        padding: 15px 15px 0px;
        position: relative;
        font-weight: 500;
        font-size: 16px;
        width: 100%;
        display: flex;
        align-items: center;
    }
}
.my-reply {
    padding: 10px;
    background-color: #fafbfc;

    .header-img {
        display: inline-block;
        vertical-align: top;
    }

    .reply-info {
        display: inline-block;
        margin-left: 5px;
        width: 92%;
        background: #fff;
        .reply-input {
            min-height: 20px;
            line-height: 22px;
            padding: 10px 10px;
            // color: rgb(51, 50, 50);
            background-color: #fff;
            border-radius: 5px;

            &:empty:before {
                content: attr(placeholder);
            }

            &:focus:before {
                content: none;
            }

            &:focus {
                padding: 8px 8px;
                border: 2px solid blue;
                box-shadow: none;
                outline: none;
            }
        }
    }

    .reply-btn-box {
        height: 25px;
        margin: 10px 0;

        .reply-btn {
            position: relative;
            float: right;
            margin-right: 15px;
        }
    }
}

.my-comment-reply {
    margin-left: 50px;

    .reply-input {
        width: flex;
    }
}

.author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}

.author-title {
    padding: 10px;

    .header-img {
        display: inline-block;
        vertical-align: top;
    }

    .author-info {
        display: inline-block;
        margin-left: 5px;
        width: 60%;
        height: 40px;
        line-height: 20px;

        > span {
            display: block;
            // cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .author-name {
                font-weight: 500;
                font-size: 14px;
                color: #1d2129;
            }
            .time {
                font-size: 13px;
                color: #86909c;
            }
        }

        .author-time {
            font-size: 13px;
            color: #86909c;
        }
    }

    .icon-btn {
        width: 30%;
        padding: 0 !important;
        float: right;

        > span {
            padding: 5px 5px 5px;
            > i {
                cursor: pointer;
            }
        }

        .iconfont {
            margin: 0 5px;
            &:hover {
                color: blueviolet;
            }
        }
    }

    .talk-box {
        margin: 0 50px;

        > p {
            margin: 0;
            font-size: 14px;
            .reply {
                font-size: 14px;
                line-height: 22px;
                color: #4e5969;
                margin-top: 8px;
                -webkit-line-clamp: 6;
            }
        }
        .reply-parent-content {
            height: 20px;
            > p {
                font-size: 13px;
                margin-top: 10px;
                background: #eaecf1;
                padding: 4px 10px;
                flex-shrink: 1;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
        }
    }

    .reply-box {
        margin: 10px 0 0 50px;
        background-color: #f7f8fa;
        color: #4e5969;
    }
}

.no-comment-box {
    background: #fff;
    height: 80px;
    text-align: center;
    border-radius: 5px;
    > span {
        font-size: 16px;
        font-weight: 500;
        line-height: 50px;
        color: #86909c;
        height: 50px;
    }
}
</style>
